<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>基本信息</title>
    <link rel="stylesheet" type="text/css" th:href="@{/assets/css/layui.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/assets/css/view.css}"/>
    <link rel="stylesheet" th:href="@{/assets/jquery-upload/css/jquery.fileupload-ui.css}" />
    <link rel="stylesheet" th:href="@{/assets/jquery-upload/css/jquery.fileupload.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/css/css_x/percenter/common.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/css_x/percenter/percenter.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/css_x/centro/pintuer.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/css_x/centro/admin.css}"/>
    <script type="text/javascript" th:src="@{/js/js_x/fondo/jquery.js}"></script>
    <script type="text/javascript" th:src="@{/js/js_x/reservation/pintuer.js}"></script>
    <script type="text/javascript" th:src="@{/js/percenter/login.js}"></script>
    <script type="text/javascript" th:src="@{/assets/layui.js}"></script>
</head>
<body>

<!--头部-->
<div style="height: 100px; width: 100%;border-bottom: solid 1px black;">
    <div style="margin-left: 12%; margin-top: 2%;"><img th:src="@{/images/img_x/download.png}" />
        <h4 style="font-size: 16px; margin-left: 80%; color: black; "><a th:href="@{/f/t/showmain}">返回首页 </a>&nbsp;| &nbsp;<a th:href="@{/f/u/withdraw}">退出账户</a></h4>
    </div>
</div>

<!--内容-->

    <div class="container" id="app" >
				<div class="content">
					<div class="main">
						<div class="info-content clearfix">
							<div class="user-profile-nav">
								<h1>个人中心</h1>
								<a href="order_form.html" th:href="@{/f/u/odform}"  class="orders ">我的订单</a>
								<a href="#" class="profile active">基本信息</a>
							</div>
<div class="profile-container">
        <div class="profile-title">
          基本信息
        </div>
    <form  enctype="multipart/form-data"  id="film-form" th:action="@{updateUser}" method="post">
  <!--      <div class="avatar-container">
          <div class="avatar-content">

            <div class="J-upload-avatar-w upload-avatar-image">
                <img alt="头像" th:style="${(user.photoAddress != null and user.photoAddress != '') ? '' : 'display:none'}" width="240px" id="queue_img" height="240px" th:src="@{'/eolane/' + ${user.photoAddress}}" >
              <input type="button"  class="J-upload-avatar upload-btn" id="film-pic" value="更换头像" >
              <input type="file"  id="fileUpload" class="J-upload-avatar upload-btn"  name="photoAddress"  />

            </div>
            <div class="tips">支持JPG,JPEG,PNG格式,且文件需小于1M</div>
          </div>
        </div>-->
        <div class="avatar-container">

            <div class="avatar-content" style="margin-top: 20px">
                <div id="queue" class="J-upload-avatar-w upload-avatar-image">
                    <input type="hidden" name="photoAddress" id="filmpic"  th:value="${user.photoAddress }">
                    <input type="hidden" id="su"  th:value="${su}">
                    <img  th:style="${(user.photoAddress != null and user.photoAddress != '') ? '' : 'display:none'}" width="240px" id="queue_img" height="240px" th:src="@{'/eolane/' + ${user.photoAddress}}" >
                </div><br>
                <button type="button" class="layui-btn" id="film-pic">
                    <i class="layui-icon">&#xe67c;</i>上传头像
                </button>
            </div>
        </div>

            <div id="J-userexinfo-form" class="userexinfo-form">
          <div class="userexinfo-form-section">
          </div>
           <div class="userexinfo-form-section">
            <p>姓名：</p>
            <span>
              <input type="text" name="userName" id="userName" class="ui-checkbox" placeholder="" th:value="${user.userName}" >
            </span>
          </div>
           <div class="userexinfo-form-section">
            <p>邮箱：</p>
            <span>
              <input type="text" id="mail" name="mail" class="ui-checkbox" placeholder="" th:value="${user.mail}">
            </span>
          </div>
          <div class="userexinfo-form-section">
            <p>性别：</p>
            <span>
              <input type="radio" name="sex" id="userexinfo-form-gender-1" value="1"   class="ui-radio radio-first" />
              <label for="userexinfo-form-gender-1">男</label>
            </span>
            <span>
              <input type="radio" name="sex" id="userexinfo-form-gender-2" value="2"  class="ui-radio">
              <label for="userexinfo-form-gender-2" >女</label>
            </span>
              <input type="hidden" id="sex" th:value="${user.sex}">
           </div>
               <!-- <input type="hidden"  th:value="${user}">-->
            <div class="userexinfo-form-section">
            <p>公司名称：</p>
            <span>
              <input type="text" id="company" name="company" class="ui-checkbox" placeholder="" th:value="${user.company}">
            </span>
          </div>
           <div class="userexinfo-form-section">
            <p>手机号码：</p>
            <span>
              <input type="text" id="phoneNumber" name="phoneNumber" class="ui-checkbox" placeholder="" th:value="${user.phoneNumber}" onfocus=this.blur()>
            </span>
          </div>
                <div class="button-group"> <input type="submit" class="button border-red"  value="保存" > </div>
            </div>

        </form>
</div>
                        </div>
                    </div>
                </div>
    </div>
</body>
<script th:src="@{/assets/layui.all.js}"></script>
<script type="text/javascript" th:src="@{/assets/jquery-upload/vendor/jquery.ui.widget.js}"></script>
<script type="text/javascript" th:src="@{/assets/jquery-upload/jquery.iframe-transport.js}"></script>
<script type="text/javascript" th:src=" @{/assets/jquery-upload/jquery.fileupload.js}"></script>
<script th:inline="javascript">
    /*<![CDATA[*/
    var contextPath = [[${#request.getContextPath()}]]; //获取当前应用路径
    /*]]>*/
</script>
<script>
    var form = layui.form
        ,layer = layui.layer;
</script>
<script type="text/javascript">
    var sex1 = document.getElementById("userexinfo-form-gender-1")
    var sex2 = document.getElementById("userexinfo-form-gender-2")
    var su = document.getElementById("su")
    var su1 = su.value;
    var sex = document.getElementById("sex")
    var s = sex.value;

    if (s == 1){
        sex1.checked = "checked"
    }else {
        sex2.checked = "checked"
        }
    if(su1){
        layer.msg("保存成功")
    }
</script>
<!--<script type="text/javascript">
    function fun() {
        var data = $("#film-form").serialize();
        $.ajax({
            type : "post",
            url : contextPath + "/f/updateUser",
            data : data,
            success : function() {
                layer.msg('保存成功', {icon: 1},function () {
                    location.href = contextPath + "/f/percenter"
                });
            }
        })
    }
</script>-->
<!--图片上传-->
<script type="text/javascript">
    layui.use('upload', function(){
        var upload = layui.upload;

        //执行实例
        var uploadInst = upload.render({
            elem: '#film-pic' //绑定元素
            ,url: contextPath + '/f/u/editor' //上传接口
            ,done: function(res){
                //上传完毕回调
                //将图片路径放到film实体的图片路径属性中
                console.log(res.data);
                $("#filmpic").val(res.data[1]);
                //将图片路径放到img标签中
                $("#queue_img").css("display","block");
                $("#queue_img").attr("src", contextPath + "/eolane/head/" + res.data[1]);
            }
            ,error: function(res){
                //请求异常回调
                layer.msg(res.data);
            }
        });
    });

</script>
<script>

</script>
</html>
